<template>
	<view>
		<uni-list :border="false">
			
			<uni-list-item   title="为你推荐" showExtraIcon="true" :leftTitle="leftTitle">
				
			</uni-list-item>
		</uni-list>
		<view class="example">
			<uni-grid :column="3" :square="false" :showBorder="true" :highlight="false" >
				<uni-grid-item v-for="(item,index) in listUrl" :index="index" >
					<view  class="grid-item-box1" @click="navTo(item)">
						<zywork-icon v-if="item.type"  :type="item.type" :color="item.color" :sizeRpx="item.size"  />
						<image v-else :src="item.imgUrl" mode=""></image>
						<text class="text">{{item.title}}</text>
					</view>
				</uni-grid-item>
				
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {
		HAS_USER_INFO,
		showInfoToast
	} from '@/common/util.js'
	export default {
		components: {
			zyworkIcon,
			uniGrid,
			uniGridItem,
			uniList,
			uniListItem
		},
		data() {
			return {
				leftTitle:{
					color:"#000000",
					size:40,
					fontWeight:800
				},
				listUrl:[
					{
						title:"面点",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/mian.png",
						size:"60",
						isPickUp: false
					},
					{
						title:"奶茶",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/naicha.png",
						size:"60",
						isPickUp: false
					},
					{
						title:"早餐",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/zaocan.png",
						size:"60",
						isPickUp: false
					},
					{
						title:"小吃",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/fantuan.png",
						size:"60",
						isPickUp: false
					},
					{
						title:"炸鸡",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/zhaji.png",
						size:"60",
						isPickUp: false
					},
					{
						title:"小卖部",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/xiaomaibu.png",
						size:"60",
						isPickUp: false
					},
					{
						title:"烧烤",
						type:"",
						color:"#000000",
						url:"",
						imgUrl:"/static/snack/shaokao.png",
						size:"60",
						isPickUp: false
					}
					
				],
			};
		},
		methods:{
			toLogin() {
				let url = '/pages/login/login'
				uni.navigateTo({
					url: url
				})
			},
			navTo(item){
				if (!uni.getStorageSync(HAS_USER_INFO)) {
					// #ifdef MP-WEIXIN
					this.toLogin()
					// #endif
				} else {
					if(item.isPickUp){
						uni.navigateTo({
							url:item.url
						})
					}else {
						showInfoToast('正在开发中');
					}
					
				}
				
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';
	@mixin padding {
		padding: 10rpx 30rpx;
	}
	.example{
		padding: 0rpx $padding-left-right;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		.grid-item-box1 {
			width: 100%;
			padding: 20rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
			text{
				margin-top: 20rpx;
				color: $info-text-color;
				font-size: $font-base;
			}
		}
		.grid-item-box2 {
			width: 100%;
			// height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
			text{
				margin-top: 10rpx;
				color: #6f6f6f;
				font-size: $font-sm;
			}
		}
	}
</style>
